<template>
	<view class="al-read">
		<NavBarVue title="请将面部对准下方扫描窗口"></NavBarVue>
		<view class="scan-box">
			<!-- 显示拍摄的照片 -->
			<image v-if="photo" :src="photo" mode="aspectFit" class="photo"></image>
			<view v-else class="placeholder">请将面部对准圆形框</view>
		</view>
		<view
			class="scan-btn bg-gradient-to-b from-[#7CA1FF] to-[#0094FF] h-68 rounded-full w-236 text-center pt-15 bg-[length:100%_100%]"
			@click="capturePhoto"
		>
			<text class="text-sm text-white"> {{ photo ? '确定' : '拍摄' }} </text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'

const photo = ref(''); // 存储拍摄的照片
const params = ref('') // 解读请求参数

onLoad((e) => {
	console.log('获取参数', e);
	params.value = e.params
})

// 拍照
const capturePhoto = () => {
	if(photo.value) {
		// 跳转到新页面，并传递照片路径
		uni.navigateTo({
			url: '/pages/test/AIRead?params=' + params.value
		})
	} else {
		uni.chooseImage({
			count: 1, // 只拍摄一张照片
			sizeType: ['original'], // 使用原图
			sourceType: ['camera'], // 调用摄像头
			success: (res) => {
				// 获取拍摄的照片路径
				const tempFilePath = res.tempFilePaths[0];
				photo.value = tempFilePath;
			},
			fail: (err) => {
				console.error('拍照失败:', err);
				uni.showToast({
					title: '拍照失败，请重试',
					icon: 'none',
				});
			},
		});
	}
};
</script>

<style lang="scss" scoped>
	.al-read {
		height: 100vh;
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		.scan-box {
			height: 245px;
			width: 245px;
			border: 4rpx solid #6284B7;
			border-radius: 50%;
			margin-top: 110rpx;
			overflow: hidden; // 隐藏超出部分
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			.photo {
				width: 100%;
				height: 100%;
			}
			.placeholder {
				color: #6284B7;
				font-size: 14px;
				text-align: center;
			}
		}
		.scan-btn {
			position: absolute;
			bottom: 100px;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>